<template>
  <div>
    <div v-if="flag == 0">
      <div class="mlt">
        <el-button
          v-permissions="{ permission: ['add:Reservation'] }"
          type="primary"
          @click="addReservationClisk"
        >
          新增预约
        </el-button>
        <el-button type="primary" @click="switchClick">切换</el-button>
      </div>
      <!-- 搜索条件 -->
      <div>
        <el-select
          v-model="doctorValue"
          clearable
          placeholder="请选择员工"
          style="margin: 10px"
        >
          <el-option
            v-for="item in doctorOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-cascader
          v-model="DepartmentValue"
          :options="DepartmentOptions"
          placeholder="预约部门"
          :props="departmentProps"
          @change="handleChange"
        />
        <el-select
          v-model="advancePaymentValue"
          clearable
          placeholder="请选择预约金是否支付"
          style="margin: 10px"
        >
          <el-option
            v-for="item in advancePaymenOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="stateValue"
          clearable
          placeholder="请选择预约状态"
          style="margin: 10px"
        >
          <el-option
            v-for="item in stateOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="remindValue"
          clearable
          placeholder="请选择短信/微信提醒"
          style="margin: 10px"
        >
          <el-option
            v-for="item in remindOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="PrintValue"
          clearable
          placeholder="请选择打印状态"
          style="margin: 10px"
        >
          <el-option
            v-for="item in PrintOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="BuildTypeValue"
          clearable
          placeholder="请选择创建类型"
          style="margin: 10px"
        >
          <el-option
            v-for="item in BuildTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <!-- 日历list -->
      <!-- <div v-if="type == 'date'">
        <table style="width: 100%">
          <tr>
            <th
              v-for="(item, key) in tableList"
              :key="key"
              style="height: 40px; line-height: 40px; border: 1px solid #f8f8f8"
            >
              {{ key }}
              {{ item.week }}
            </th>
          </tr>
          <th v-for="(item, key) in tableList" :key="key">
            <div
              v-for="(items, index) in item.list"
              :key="index"
              :class="items.res_status"
              style="cursor: pointer; border-radius: 25px"
              @click="details(items)"
            >
              <p style="height: 60px; line-height: 60px">
                {{ items.res_user_name }}
                {{ items.res_time }}
              </p>
            </div>
          </th>
        </table>
      </div> -->

      <div v-if="type == 'date'">
        <table class="tftable" style="width: 98%">
          <thead>
            <tr>
              <td v-for="(item, key) in tableList" :key="key" colspan="1">
                {{ key }}
                {{ item.week }}
              </td>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td
                v-for="(item, key) in tableList"
                :key="key"
                style="vertical-align: top"
              >
                <div
                  v-for="(items, index) in item.list"
                  :key="index"
                  :class="items.res_status"
                  style="cursor: pointer; border-radius: 25px"
                  @click="details(items)"
                >
                  <p style="padding-top: 10px">
                    预约时间：{{ items.res_time }}
                  </p>
                  <p>预约人：{{ items.cus_name }}</p>
                  <p style="padding-bottom: 10px">
                    预约医生：{{ items.res_user_name }}
                  </p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 表格list -->
      <div v-if="type == 'list'">
        <el-table :data="tableData1" style="width: 100%">
          <el-table-column label="用户组" prop="group_name" />
          <el-table-column label="手机号" prop="customer_tel" />
          <el-table-column label="预约日期" prop="res_date" />
          <el-table-column label="预约时间" prop="res_time" />
          <el-table-column label="预约部门" prop="dept_name" />
          <el-table-column
            label="预约执行人（如：医生，老师）"
            prop="res_user_name"
          />
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.res_status_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-if="scope.row.group_name" slot-scope="scope">
              <el-button size="mini" type="text" @click="details(scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增预约 -->
    <div v-if="flag == 1">
      <AddReservation @showMain="showMain" />
    </div>
    <!-- 详情 -->
    <el-dialog
      :before-close="handleClose"
      title="预约信息"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <el-table :data="customer_info" style="width: 100%">
        <el-table-column label="日期" prop="res_date" />
        <el-table-column label="姓名" prop="cus_name" />
        <el-table-column label="预约单备注" prop="remark" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.res_status_name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="detailsList(scope.row)">
              详情
            </el-button>

            <el-button size="mini" type="text" @click="message(scope.row)">
              发送短信
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
    <!-- 预约信息 -->
    <el-dialog title="预约信息" :visible.sync="detailshandleClose" width="70%">
      <div id="printTest">
        <div style="display: flex">
          <p style="flex: 0 0 30%">
            姓名：{{ userDetailsList.app_customer_name }}
          </p>
          <p style="flex: 0 0 30%">性别：{{ userDetailsList.gender }}</p>
          <p>年龄：{{ userDetailsList.age }}</p>
        </div>
        <el-divider />
        <div style="display: flex">
          <p style="flex: 0 0 30%">出生日期：{{ '2014-04-15' }}</p>
          <p style="flex: 0 0 30%">
            手机号码：{{ userDetailsList.customer_tel }}
          </p>
          <p>家庭住址：{{ '青岛市' }}</p>
        </div>
        <el-divider />
        <div style="display: flex">
          <p style="flex: 0 0 30%">预约日期：{{ userDetailsList.res_date }}</p>
          <p style="flex: 0 0 30%">预约时间：{{ userDetailsList.res_time }}</p>
          <p style="flex: 0 0 30%">商品：{{ userDetailsList.goods_name }}</p>
        </div>
        <el-divider />
        <div style="display: flex">
          <p style="flex: 0 0 30%">预约科室：{{ userDetailsList.dept_name }}</p>
          <p style="flex: 0 0 30%">
            预约医生：{{ userDetailsList.res_user_name }}
          </p>
          <p style="flex: 0 0 30%">
            创建人：{{ userDetailsList.create_user_name }}
          </p>
        </div>
        <el-divider />
        <div style="display: flex">
          <p style="flex: 0 0 30%">创建时间：{{ '2021-12-14 11:44:44' }}</p>
          <p style="flex: 0 0 30%">预约金：{{ userDetailsList.res_deposit }}</p>
          <p style="flex: 0 0 30%">
            科室费用：{{ userDetailsList.res_deposit }}
          </p>
        </div>
        <el-divider />
        <div style="display: flex">
          <p style="flex: 0 0 30%">
            预约状态：{{ userDetailsList.res_item_status_name }}
          </p>
          <p style="flex: 0 0 30%">
            开始接诊：{{ userDetailsList.begin_time }}
          </p>
          <p style="flex: 0 0 30%">结束就诊： {{ userDetailsList.end_time }}</p>
        </div>
      </div>
      <!-- 取消预约 -->
      <el-dialog
        append-to-body
        title="取消预约"
        :visible.sync="innerVisible"
        width="30%"
      >
        <div>
          <el-select
            v-model="cancelValue"
            placeholder="请选择取消原因"
            style="margin: 10px"
            @change="cancelChange"
          >
            <el-option
              v-for="item in cancelOptions"
              :key="item.id"
              :label="item.reason_explain"
              :value="item.id"
            />
          </el-select>
          <el-button type="primary" @click="innerVisible = false">
            取消
          </el-button>
          <el-button
            v-permissions="{ permission: ['cancel:Reservation'] }"
            type="primary"
            @click="cancelAppointment(userDetailsList.id)"
          >
            确认取消
          </el-button>
        </div>
      </el-dialog>
      <!-- ------------------------------- -->
      <!-- 支付预约金 -->
      <el-dialog
        append-to-body
        title="支付预约金"
        :visible.sync="paymentVisible"
        width="30%"
      >
        <div>
          <!-- <el-button type="primary" @click="paymentVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="payment(userDetailsList)">
            支付
          </el-button> -->
          <el-link href="order_sn" type="primary">{{ order_sn }}</el-link>
        </div>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button v-print="'#printTest'" type="primary">打印</el-button>
        <el-button
          v-if="userDetailsList.res_item_status == 'res_wait'"
          type="primary"
          @click="paymentVisible = true"
        >
          支付预约金
        </el-button>
        <el-button
          v-if="userDetailsList.res_item_status == 'res_success'"
          type="primary"
          @click="checkInClick(userDetailsList.id)"
        >
          接诊
        </el-button>
        <el-button
          v-if="
            userDetailsList.res_item_status != 'res_visiting' ||
            userDetailsList.res_item_status != 'res_ended' ||
            userDetailsList.res_item_status != 'res_cancel' ||
            userDetailsList.res_item_status != 'res_refund' ||
            userDetailsList.res_item_status != 'res_invalid' ||
            userDetailsList.res_item_status != 'res_finished'
          "
          v-permissions="{ permission: ['cancel:Reservation'] }"
          type="primary"
          @click="innerVisible = true"
        >
          取消预约
        </el-button>
        <el-button type="primary" @click="dialogdetai">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { getDeptLists } from '@/api/addOrganization'
  import { getSchedulingLists } from '@/api/scheduling'
  import {
    getReservationList,
    reservationDetail,
    cancelReason,
    cancelReservation,
    reservationPay,
    checkIn,
  } from '@/api/reservation'
  import AddReservation from './components/addReservation.vue'
  export default {
    components: {
      AddReservation,
    },
    data() {
      return {
        detailshandleClose: false,
        dialogVisible: false,
        innerVisible: false,
        paymentVisible: false,
        //切换页面状态
        flag: 0,
        doctorValue: '',
        doctorOptions: [],
        DepartmentValue: '',
        DepartmentOptions: [],
        PackageValue: '',
        PackageOptions: [],
        clinicValue: '',
        clinicOptions: [],
        advancePaymentValue: '',
        advancePaymenOptions: [
          { id: '1', name: '已支付' },
          { id: '2', name: '未支付' },
        ],
        stateValue: '',
        stateOptions: [
          { id: '1', name: '已预约' },
          { id: '2', name: '已取消' },
          { id: '3', name: '待支付预约金' },
          { id: '4', name: '已成功预约' },
          { id: '5', name: '接诊中' },
          { id: '6', name: '接诊结束' },
          { id: '7', name: '已收费' },
          { id: '8', name: '已完成' },
        ],
        remindValue: '',

        remindOptions: [
          { id: '1', name: '已发送' },
          { id: '2', name: '未发送' },
        ],
        PrintValue: '',
        PrintOptions: [
          { id: '1', name: '已打印' },
          { id: '2', name: '未打印' },
        ],
        BuildTypeValue: '',
        BuildTypeOptions: [],
        tableData: {},
        tableData1: [],
        departmentProps: {
          value: 'id',
          label: 'dept_name',
          children: 'children',
        },
        type: 'date',
        customer_info: [],
        tableList: {},
        userDetailsList: {},
        cancelValue: '',
        cancelOptions: [],
        reason_id: '',
        order_sn: '',
      }
    },
    watch: {},
    mounted() {
      this.init()
    },
    methods: {
      init() {
        getDeptLists().then((res) => {
          this.DepartmentOptions = res.data
        })
        const params = {
          type: this.type,
        }
        getReservationList(params).then((e) => {
          this.tableList = e.data
        })
        cancelReason().then((a) => {
          this.cancelOptions = a.data
        })
      },
      // 新增预约
      addReservationClisk() {
        this.flag = 1
      },
      // 切换
      switchClick() {
        if (this.type == 'date') {
          this.type = 'list'
          const params = {
            type: this.type,
          }
          getReservationList(params).then((e) => {
            e.data.data.forEach((res) => {
              res.group_name = res.group_name + '(' + res.cus_name + ')'
            })
            this.tableData1 = e.data.data
          })
        } else {
          this.type = 'date'
          const params = {
            type: this.type,
          }
          getReservationList(params).then((e) => {
            this.tableList = e.data
          })
        }
      },
      // 详情
      details(e) {
        console.log()
        this.customer_info = []
        this.dialogVisible = true
        this.customer_info.push(e)
      },
      // 详情里的详情按钮
      detailsList(e) {
        const params = {
          id: e.id,
        }
        reservationDetail(params).then((res) => {
          this.order_sn =
            window.location.origin + '/pay/order' + '?sn=' + res.data.order_sn
          this.userDetailsList = res.data
          this.dialogVisible = false
          this.detailshandleClose = true
        })
      },
      // 详情里打印按钮
      Print() {},
      checkInClick(e) {
        const data = {
          id: e,
        }
        checkIn(data).then(() => {
          this.init()
          this.paymentVisible = false
          this.detailshandleClose = false
        })
      },
      // 详情短信按钮
      message() {},
      // 组件回调
      showMain(e) {
        this.flag = e
        this.init()
      },
      renderheader(h, { column }) {
        return h('span', {}, [
          h('span', {}, column.label.split('=')[0]),
          h('br'),
          h('span', {}, column.label.split('=')[1]),
        ])
      },
      // 部门
      handleChange(e) {
        const params = {
          mec_id: e,
        }
        getSchedulingLists(params).then(() => {})
      },
      // 详情页关
      dialogdetai() {
        this.detailshandleClose = false
        this.dialogVisible = true
      }, // 取消原因下拉框取值
      cancelChange(e) {
        this.reason_id = e
      },

      // 取消预约
      cancelAppointment(e) {
        const params = {
          id: e,
          reason_id: this.reason_id,
        }
        cancelReservation(params).then(() => {
          this.detailshandleClose = false
          this.dialogVisible = false
          this.innerVisible = false
          this.init()
        })
      },
      // 支付预约金
      payment(e) {
        const params = {
          id: e.id,
        }
        reservationPay(params).then(() => {
          this.init()
          this.paymentVisible = false
          this.dialogVisible = false
          this.detailshandleClose = false
        })
      },
      // 预约金付款
      checkOut() {},
      // 弹框的回调
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
    },
  }
</script>
<style lang="scss" scoped>
  .res_occupy {
    color: #ffffff;
    background: #bc8bf0;
  }
  .res_wait {
    color: #ffffff;
    background: #bc8bf0;
  }
  .res_success {
    color: #ffffff;
    background: #ff5674;
  }
  .reg_success {
    color: #ffffff;
    background: #ff5674;
  }

  .res_visiting {
    color: #ffffff;
    background: #1890ff;
  }
  .res_ended {
    color: #ffffff;
    background: #36cbcb;
  }
  .res_finished {
    color: #ffffff;
    background: #4ecb73;
  }
  .res_cancel {
    color: #ffffff;
    background: #b5b5b5;
  }
  .res_refund {
    color: #ffffff;
    background: #b5b5b5;
  }
  .res_invalid {
    color: #ffffff;
    background: #b5b5b5;
  }
  table.tftable,
  table.table-count {
    font-size: 12px;
    color: #333333;
    width: 100%;
    border-width: 1px;
    border-collapse: collapse;
  }

  table.table-count th,
  table.table-count td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: center;
  }

  table.tftable th,
  table.tftable td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: left;
    text-align: center;
  }

  .tftable {
    margin-left: 1%;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  // table.tftable tr:hover {
  //   background: #c3ecff;
  // }
  // .tftable > thead > tr:hover {
  //   background: white;
  // }
</style>
